<template>
    <transition name="moveR">
        <el-card v-dialogDrag="true" v-show="visible" class="vue-chat-dialog" ref="chat">
            <div slot="header" class="clearfix vue-chat-title">
                <span>在线咨询</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="hide">
                    <i class="el-dialog__close el-icon el-icon-close"></i>
                </el-button>
            </div>
            <div class="vue-chat">
                <div class="sidebar">
                    <card></card>
                    <list></list>
                </div>
                <div class="main">
                    <message></message>
                    <text-up></text-up>
                </div>
            </div>
        </el-card>
    </transition>
</template>

<script>
import { mapState } from 'vuex';

import Card from './components/card';
import List from './components/list';
import TextUp from './components/textUp';
import Message from './components/message';

export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    components: { Card, List, TextUp, Message },
    computed: {
        ...mapState({
            // treeAreaList: (state) => state.userControl.treeAreaList,
        }),
    },
    created() {},
    methods: {
        hide() {
            this.$emit('update:visible', false);
        },
    },
    directives: {
        // 发送消息后滚动到底部
        dialogDrag: {
            inserted(el) {
                const dialogHeaderEl = el.querySelector('.el-card__header');
                const dragDom = el;

                const clientW = document.body.clientWidth;

                dialogHeaderEl.style.cssText += ';cursor:move;';
                dragDom.style.cssText += `;left: ${(clientW - 1000) / 2}px;top: 150px;`;

                dragDom.onmousedown = function (e) {
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    document.onmousemove = function (e) {
                        el.style.left = e.pageX - disx + 'px';
                        el.style.top = e.pageY - disy + 'px';
                    };
                    document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                    };
                };
            },
        },
    },
};
</script>

<style lang="less" scoped>
.vue-chat-dialog {
    position: fixed;
    width: 1000px;
    z-index: 10000;
    transition: inherit;

    .vue-chat-title {
        line-height: 59px;
        padding-left: 18px;
    }
}
.vue-chat {
    margin: 0 auto;
    height: 600px;

    overflow: hidden;
    border-radius: 3px;

    .sidebar,
    .main {
        height: 100%;
    }
    .sidebar {
        float: left;
        width: 200px;
        color: #f4f4f4;
        background-color: #2e3238;
    }
    .main {
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }
    .text {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .message {
        height: ~'calc(100% - 160px)';
    }
}

// 右侧划入
.moveR-enter-active,
.moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
}
.moveR-enter,
.moveR-leave {
    transform: translate(100%, 100%);
}
.moveR-leave-to {
    transform: translate(100%, 100%);
}

// 左侧划入
.moveL-enter-active,
.moveL-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0%);
}
.moveL-enter,
.moveL-leave {
    transform: translateX(-100%);
}
.moveL-leave-to {
    transform: translateX(-100%);
}
</style>
